<template>
    <div class="messagebox">
        <h2>用户留言</h2>
        <div class="messagebox-content">
            <textarea name="" id="" cols="30" rows="10" placeholder="请输入您的留言..." v-model="content" class="messagebox-value"/>
        </div>
        <div class="messagebox-userinfo">
            <input type="text" placeholder="用户昵称" v-model="userName" class="messagebox-userinfo-name"/><button @click="publishMessage" class="messagebox-userinfo-btn">发布</button>
        </div>
        <div class="messagebox-usermessages">
            <p v-if="!messages.length" class="messagebox-usermessages-none">暂无评论，赶快抢沙发！</p>
            <ul v-else>
                <li v-for="(item,index) of messages" :key="index" class="messagebox-item">
                    <div class="messagebox-item-left"></div>
                    <div class="messagebox-item-right">
                        <p class="messagebox-item-right-top"><span>{{item.authorName}}</span>发表于{{item.time}}</p>
                        <p class="messagebox-item-right-bottom">{{item.content}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
	export default {
		name: "MessageBox",
        props:['articleId'],
		data(){
			return {
				userName:'',
				content:'',
				messages:[]
			}
		},
        async mounted(){
			let result = await this.$getArticleMessage({articleId:this.articleId});
			this.messages = result.data;
        },
        methods:{
			async publishMessage(){
				if(this.userName && this.content){
					let time = new Date().toLocaleString();
					let result = await this.$publishMessage({
						articleId:this.articleId,
						authorName:this.userName,
						time,
						content:this.content
                    });
					if(result.status){
						window.alert('发表成功!');
						this.messages.push({
							authorName:this.userName,
                            time,
                            content:this.content
                        });
						this.userName = '';
						this.content = '';
                    }
                }else{
					window.alert('请检查信息是否完整!')
                }
            }
        }
	}
</script>

<style scoped>
    .messagebox{
        background-color: #fff;
        padding: 10px;
    }
    h2{
        font-size: 16px;
        margin-bottom: 10px;
    }
    .messagebox-value{
        outline: none;
        border: 1px solid #444;
        box-sizing: border-box;
        padding: 5px;
        resize: none;
        width: 100%;
        height: 100px;
        border-radius: 5px;
    }
    .messagebox-value:focus{
        border-color:#FFA500;
    }
    .messagebox-userinfo{
        margin-top:10px;
        margin-bottom: 30px;
    }
    .messagebox-userinfo-name{
        outline: none;
        border: 1px solid #444;
        line-height: 25px;
        text-indent: 10px;
        margin-right: 20px;
        border-radius: 5px;
    }
    .messagebox-userinfo-name:focus{
        border-color:#FFA500;
    }
    .messagebox-userinfo-btn{
        outline: none;
        border: none;
        line-height: 27px;
        width: 100px;
        background-color: #6495ED;
        color: #fff;
        transition: .5s;
    }
    .messagebox-userinfo-btn:hover{
        cursor: pointer;
        background-color: #8A2BE2;
    }
    .messagebox-usermessages-none{
        background-color: #E5E8E9;
        line-height: 30px;
        text-align: center;
    }
    .messagebox-item{
        display: flex;
        justify-content: flex-start;
        border-top:1px solid #C1C1C1;
        padding: 10px 0;
    }
    .messagebox-item-left{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: url("@/static/icons/avatar.jpeg") no-repeat 0 0 / 60px 60px;
    }
    .messagebox-item-right{
        margin-left: 20px;
        font-size: 13px;
        flex: 1;
    }
    .messagebox-item-right-top{
        margin-bottom: 5px;
    }
    .messagebox-item-right-top span{
        margin-right: 10px;
        font-weight: bolder;
    }
    .messagebox-item-right-bottom{
        min-height: 30px;
        padding: 5px;
        border:1px solid #E0E0E0;
    }
</style>